<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
//引入api 发送请求获取message列表
import { messagePage } from '@/apis/message/index'
//引入搜索模块
import searchModel from '@/components/search-model/index.vue'
//引入消息列表
import messageList from './components/messagelist.vue'
//引入返回上一页icon
import iconBackto from '@/components/icon-backto/index.vue'

//当前页数
const current = ref(1)
//messageList列表数据
const messageListData = reactive({
    records: [],
})

onLoad(async () => {
    uni.$emit('updateTitle')
    //请求message列表数据
    const data = await messagePage({ current: current.value })
    // ifcode==200 代表请求成功 将数据赋值给messageListData
    if (data.code === 200) {
        messageListData.records = data.data.records
    } else {
        uni.showToast({
            title: '服务器出错',
            icon: 'none',
            duration: 2000,
        })
    }
})

/**
 * 下拉触底加载更多函数
 */
const handleChangePage = async () => {
    console.log('下拉触底加载更多函数')
    current.value++
    const data = await messagePage({ current: current.value })
    if (data.data.total > messageListData.records.length) {
        messageListData.records = messageListData.records.concat(data.data.records)
    } else {
        uni.showToast({
            title: '没有更多数据了',
            icon: 'none',
            duration: 2000,
        })
    }
}
/**
 * 搜索框组件返回数据
 */
const handleSearchTitle = (value: any) => {
    if (value.code !== 200) {
        uni.showToast({
            title: '服务器出错',
            icon: 'none',
            duration: 2000,
        })
        return
    }
    if (value.data.records.length === 0) {
        uni.showToast({
            title: '没有更多数据',
            icon: 'none',
            duration: 2000,
        })
        return
    }
    console.log('搜索框组件返回数据', value)
    messageListData.records = value.data.records
}
</script>

<template>
    <view class="content">
        <view class="content__top">
            <icon-backto :type="3"></icon-backto>
            <view class="content__top--search">
                <search-model :width="'608'" :title="'搜索'" :searchtype="0" @search-enter="handleSearchTitle"></search-model>
            </view>
        </view>
        <scroll-view class="content__bottom" :scroll-y="true" @scrolltolower="handleChangePage">
            <template v-if="messageListData.records.length">
                <view v-for="item in messageListData.records" :key="item">
                    <message-list :list="item"></message-list>
                </view>
            </template>
            <template v-else>
                <view class="box"> 暂无数据</view>
            </template>
        </scroll-view>
    </view>
</template>
<style lang="scss" scoped>
@include b(content) {
    height: 100vh;
    display: flex;
    flex-direction: column;

    @include e(top) {
        margin-top: 72rpx;
        height: 90rpx;
        display: flex;
        @include m(search) {
            margin-left: 30rpx;
            height: 100%;
        }
    }
    @include e(bottom) {
        height: 1172rpx;
    }
}
@include b(box) {
    font-size: 48rpx;
    color: #999;
    text-align: center;
    margin-top: 200rpx;
}
</style>
